import {Image, StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect} from "react";

export default function cancelAccountScreen() {

    const router = useRouter();

    useEffect(() => {
        // goAccount();
    });

    const goIndex = () => {
        router.push("/");
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '注销账号', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={{ marginTop: 29, marginLeft: 12 }}>
                <Text style={ styles.cancelAccountTitle }>注销账号</Text>
                <Text style={styles.cancelTip}>账号被注销后，如下信息将被清空，且无法找回</Text>
                <View style={styles.cancelList}>
                    <View style={{ flexDirection: "row", alignItems: "center", height: 32}}>
                        <View style={styles.bullet}></View>
                        <Text style={styles.tip}>账户身份、账户信息及相关权益</Text>
                    </View>
                    {/*<View style={{ flexDirection: "row", alignItems: "center", height: 32}}>*/}
                    {/*    <View style={styles.bullet}></View>*/}
                    {/*    <Text style={styles.tip}>账户身份、账户信息及相关权益</Text>*/}
                    {/*</View>*/}
                    {/*<View style={{ flexDirection: "row", alignItems: "center", height: 32 }}>*/}
                    {/*    <View style={styles.bullet}></View>*/}
                    {/*    <Text style={styles.tip}>账户身份、账户信息及相关权益</Text>*/}
                    {/*</View>*/}
                </View>
            </View>

            <View>
                <Text style={styles.botTip}>
                    请确保所有交易已完结且无纠纷，账户注销后历史交易可 能产生的资金退回权益等将视作自动放弃。
                </Text>
            </View>

           <TouchableOpacity onPress={goIndex}>
               <View style={styles.cancelAccountBtn}>
                   <Text style={styles.cancelAccountText}>注销</Text>
               </View>
           </TouchableOpacity>

        </View>

    );
}

const styles = StyleSheet.create({
    cancelAccountTitle: {
        color: "#2A2B30",
        fontSize: 24,
    },
    cancelTip: {
        fontSize: 12,
        color: "#9C9EAC",
        marginTop: 12,
    },
    cancelList: {
        marginTop: 39,
        width: scaleSize(351),
        paddingBottom: 20,
        minHeight: 100,
        borderBottomColor: "#E4E6EC",
        borderBottomWidth: 0.5
    },
    tip: {
        color: "#2A2B30",
        fontSize: 14,
        // marginBottom: 14,

    },
    bullet: {
        width: 2,
        height: 2,
        borderRadius: 1, // 圆形
        backgroundColor: '#000', // 圆点颜色
        marginRight: 4, // 圆点和文字之间的间距
    },
    botTip: {
        marginTop: 30,
        width: scaleSize(296),
        marginLeft: 12,
        fontSize: 12,
        color: "#9C9EAC",
    },
    cancelAccountBtn: {
        width: scaleSize(351),
        height: 44,
        marginTop: 80,
        borderRadius: 44,
        margin: "auto",
        backgroundColor: "#EC6138"
    },
    cancelAccountText: {
        textAlign: "center",
        color: "#fff",
        lineHeight: 44,
        fontSize: 14,
    },
});
